<template>
    <div>
        <van-cell-group align="left" style="margin-top: 1rem;margin-bottom: 2rem">
            <van-field v-model="userId" label="用户ID" placeholder="请输入用户ID"/>
            <van-field v-model="message" label="发送消息" placeholder="发送消息"/>
        </van-cell-group>
        <button @click="send">发送</button>
    </div>
</template>

<script>
    import Notify from "vant/lib/notify";

    export default {
        name: "webSocket",
        data() {
            return {
                ws: null,
                userId: '',
                message: '',
                timeout: 50,
                timeoutObj: null,
                serverTimeoutObj: null,
            }
        },
        mounted() {
            this.wss()

        },
        methods: {
            wss() {
                const that= this;
                this.ws = new WebSocket('ws://' + window.location.host + '/socketServer/10086')
                this.ws.onmessage = function (evt) {
                    console.log(evt)
                    console.log(evt.data)
                    Notify({message: evt.data, type: 'success', duration: 3000})
                };
                this.ws.onopen = function () {
                    console.log(that.getNowTime()+ " Socket 已打开");
                    that.ws.send("连接成功");

                    //心跳检测重置
                    that.start();
                };

            },
            send() {
                const socketMsg = {toUser: this.userId, type: 2, message: this.message};
                this.ws.send(JSON.stringify(socketMsg))
            },


            start() {
                console.log(this.getNowTime() + " Socket 心跳检测");
                var self = this;
                this.timeoutObj && clearTimeout(this.timeoutObj);
                this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
                this.timeoutObj = setTimeout(function () {
                    //这里发送一个心跳，后端收到后，返回一个心跳消息，
                    //onmessage拿到返回的心跳就说明连接正常
                    console.log(self.getNowTime() + ' Socket 连接重试');
                    self.ws.send("连接成功");
                    self.serverTimeoutObj = setTimeout(function () {
                        console.log(this.ws);
                        self.ws.close();
                    }, self.timeout);
                }, self.timeout)
            },
            p(s) {
                return s < 10 ? '0' + s : s;
            },
            getNowTime() {
                var myDate = new Date();
                //获取当前年
                var year = myDate.getFullYear();
                //获取当前月
                var month = myDate.getMonth() + 1;
                //获取当前日
                var date = myDate.getDate();
                var h = myDate.getHours();       //获取当前小时数(0-23)
                var m = myDate.getMinutes();     //获取当前分钟数(0-59)
                var s = myDate.getSeconds();
                return year + '-' + this.p(month) + "-" + this.p(date) + " " + this.p(h) + ':' + this.p(m) + ":" + this.p(s);
            }

        }
    }
</script>

<style scoped>

</style>